<script setup lang="ts">
import { ref } from 'vue';

import {
  BarChartOutlined,
  ExperimentOutlined,
  FileProtectOutlined,
  FormOutlined,
  FundOutlined,
  LineChartOutlined,
  MedicineBoxOutlined,
  PieChartOutlined,
  PlusOutlined,
  ReadOutlined,
  SafetyCertificateOutlined,
  ShareAltOutlined,
  TrophyOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

// API统计
const apiStats = ref({
  today: 45,
  month: 1234,
  total: 15_678,
  cost: 2340,
});

// API调用日志
const apiCallLogs = ref([
  {
    id: 1,
    api: '私人银行 - 资产查询',
    timestamp: '2025-10-14 10:30:15',
    institution: 'UBS',
    status: 'success',
    cost: 0.5,
  },
  {
    id: 2,
    api: '保险公司 - 保单验证',
    timestamp: '2025-10-14 09:15:22',
    institution: '平安保险',
    status: 'success',
    cost: 0.3,
  },
  {
    id: 3,
    api: '医疗机构 - 健康数据共享',
    timestamp: '2025-10-14 08:45:10',
    institution: '协和医院',
    status: 'success',
    cost: 1,
  },
]);

const apiColumns = [
  { title: 'API', dataIndex: 'api', key: 'api' },
  { title: '机构', dataIndex: 'institution', key: 'institution' },
  { title: '时间', dataIndex: 'timestamp', key: 'timestamp' },
  { title: '状态', key: 'status' },
  { title: '费用', dataIndex: 'cost', key: 'cost' },
];

// 费用记录
const feeRecords = ref([
  {
    id: 1,
    institution: '瑞士联合银行',
    service: '资产配置规划',
    amount: 5,
    date: '2025-09-15',
    status: 'paid',
  },
  {
    id: 2,
    institution: '平安保险',
    service: '财富传承保险',
    amount: 20,
    date: '2025-09-20',
    status: 'paid',
  },
  {
    id: 3,
    institution: '协和医院',
    service: '高端体检',
    amount: 1.5,
    date: '2025-10-01',
    status: 'pending',
  },
  {
    id: 4,
    institution: '清华大学',
    service: '奖学金管理',
    amount: 2,
    date: '2025-10-05',
    status: 'review',
  },
]);

const feeColumns = [
  { title: '合作机构', dataIndex: 'institution', key: 'institution' },
  { title: '服务项目', dataIndex: 'service', key: 'service' },
  { title: '金额（万）', dataIndex: 'amount', key: 'amount' },
  { title: '日期', dataIndex: 'date', key: 'date' },
  { title: '状态', key: 'status' },
  { title: '操作', key: 'action' },
];

function viewPortfolio() {
  message.info(
    '资产组合详情（演示）：\n✓ 股票：40%\n✓ 债券：30%\n✓ 房产：20%\n✓ 现金：10%\n年化收益：5.8%',
  );
}

function createTrust() {
  message.info(
    '创建信托基金（演示）：\n1. 设置信托金额\n2. 指定受益人\n3. 设定分配规则\n4. 智能合约自动执行',
  );
}

function wealthPlanning() {
  message.info(
    '财富规划方案（演示）：\n✓ 家族资产配置建议\n✓ 税务优化方案\n✓ 传承规划\n✓ 风险控制',
  );
}

function viewPolicies() {
  message.info(
    '保单列表（演示）：\n1. 人寿保险 - ¥2000万\n2. 健康保险 - ¥1000万\n3. 意外险 - ¥500万',
  );
}

function createPolicy() {
  message.info(
    '创建保单（演示）：\n1. 选择保险类型\n2. 填写投保信息\n3. 基因数据验证\n4. 智能合约自动理赔',
  );
}

function submitClaim() {
  message.info(
    '提交理赔（演示）：\n1. 上传医疗证明\n2. 智能合约验证\n3. 自动审核\n4. 快速赔付',
  );
}

function shareHealthData() {
  message.info(
    '授权健康数据（演示）：\n✓ MPC技术保护隐私\n✓ 仅共享必要信息\n✓ 链上记录访问日志\n✓ 随时可撤销',
  );
}

function viewHealthReport() {
  message.info(
    '健康报告（演示）：\n✓ 基因风险评估\n✓ 个性化建议\n✓ 家族聚合数据\n✓ MPC计算保护隐私',
  );
}

function geneticCounseling() {
  message.info(
    '基因咨询服务（演示）：\n✓ 专业遗传咨询师\n✓ 1对1咨询\n✓ 生育指导\n✓ 健康管理',
  );
}

function manageScholarship() {
  message.info(
    '奖学金管理（演示）：\n✓ 智能合约自动发放\n✓ GPA验证\n✓ 区块链存证\n✓ 透明可追溯',
  );
}

function verifyStudent() {
  message.info(
    '学生身份验证（演示）：\n✓ 学信网验证\n✓ 区块链DID\n✓ 防伪造\n✓ 全球认可',
  );
}

function viewCourses() {
  message.info(
    '合作课程（演示）：\n1. 清华-家族企业管理\n2. 北大-文化传承课程\n3. 复旦-财富管理',
  );
}

function viewFeeDetail(record: any) {
  message.info(
    `费用详情：\n机构：${record.institution}\n服务：${record.service}\n金额：¥${record.amount}万\n日期：${record.date}\n状态：${record.status === 'paid' ? '已支付' : (record.status === 'pending' ? '待支付' : '审核中')}`,
  );
}

function payFee(record: any) {
  message.loading('正在通过多签钱包支付...', 2);
  setTimeout(() => {
    message.success(
      `支付成功！\n金额：¥${record.amount}万\n交易哈希：0x1234...5678`,
    );
    record.status = 'paid';
  }, 2000);
}
</script>

<template>
  <div class="business-collaboration">
    <a-card title="🏢 商业协作中心">
      <a-row :gutter="16">
        <!-- 私人银行 -->
        <a-col :span="12">
          <a-card title="🏦 私人银行服务" size="small" hoverable>
            <a-descriptions :column="1" size="small" bordered>
              <a-descriptions-item label="合作银行">
                瑞士联合银行（UBS）
              </a-descriptions-item>
              <a-descriptions-item label="托管资产">
                ¥12,500万元
              </a-descriptions-item>
              <a-descriptions-item label="年化收益"> 5.8% </a-descriptions-item>
              <a-descriptions-item label="服务状态">
                <a-tag color="green">已激活</a-tag>
              </a-descriptions-item>
            </a-descriptions>

            <a-divider />

            <h4>可用服务</h4>
            <a-space direction="vertical" style="width: 100%">
              <a-button block @click="viewPortfolio">
                <FundOutlined /> 查看资产组合
              </a-button>
              <a-button block @click="createTrust">
                <SafetyCertificateOutlined /> 创建信托基金
              </a-button>
              <a-button block @click="wealthPlanning">
                <LineChartOutlined /> 财富规划方案
              </a-button>
            </a-space>
          </a-card>
        </a-col>

        <!-- 保险公司 -->
        <a-col :span="12">
          <a-card title="🛡️ 保险服务" size="small" hoverable>
            <a-descriptions :column="1" size="small" bordered>
              <a-descriptions-item label="合作保险">
                中国平安人寿
              </a-descriptions-item>
              <a-descriptions-item label="保单数量"> 8份 </a-descriptions-item>
              <a-descriptions-item label="总保额">
                ¥5,000万元
              </a-descriptions-item>
              <a-descriptions-item label="服务状态">
                <a-tag color="green">已激活</a-tag>
              </a-descriptions-item>
            </a-descriptions>

            <a-divider />

            <h4>保单管理</h4>
            <a-space direction="vertical" style="width: 100%">
              <a-button block @click="viewPolicies">
                <FileProtectOutlined /> 查看保单
              </a-button>
              <a-button block @click="createPolicy">
                <PlusOutlined /> 创建新保单
              </a-button>
              <a-button block @click="submitClaim">
                <FormOutlined /> 提交理赔
              </a-button>
            </a-space>
          </a-card>
        </a-col>
      </a-row>

      <a-row :gutter="16" style="margin-top: 16px">
        <!-- 医疗机构 -->
        <a-col :span="12">
          <a-card title="🏥 医疗机构协作" size="small" hoverable>
            <a-descriptions :column="1" size="small" bordered>
              <a-descriptions-item label="合作医院">
                北京协和医院
              </a-descriptions-item>
              <a-descriptions-item label="授权数据">
                健康档案（加密）
              </a-descriptions-item>
              <a-descriptions-item label="有效期至">
                2026-12-31
              </a-descriptions-item>
              <a-descriptions-item label="数据访问">
                23次（链上记录）
              </a-descriptions-item>
            </a-descriptions>

            <a-divider />

            <h4>医疗服务</h4>
            <a-space direction="vertical" style="width: 100%">
              <a-button block @click="shareHealthData">
                <ShareAltOutlined /> 授权健康数据
              </a-button>
              <a-button block @click="viewHealthReport">
                <MedicineBoxOutlined /> 查看健康报告
              </a-button>
              <a-button block @click="geneticCounseling">
                <ExperimentOutlined /> 基因咨询服务
              </a-button>
            </a-space>
          </a-card>
        </a-col>

        <!-- 教育机构 -->
        <a-col :span="12">
          <a-card title="🎓 教育机构协作" size="small" hoverable>
            <a-descriptions :column="1" size="small" bordered>
              <a-descriptions-item label="合作院校">
                清华大学、北京大学
              </a-descriptions-item>
              <a-descriptions-item label="奖学金基金">
                ¥500万元
              </a-descriptions-item>
              <a-descriptions-item label="受益学生"> 12人 </a-descriptions-item>
              <a-descriptions-item label="服务状态">
                <a-tag color="green">已激活</a-tag>
              </a-descriptions-item>
            </a-descriptions>

            <a-divider />

            <h4>教育服务</h4>
            <a-space direction="vertical" style="width: 100%">
              <a-button block @click="manageScholarship">
                <TrophyOutlined /> 管理奖学金
              </a-button>
              <a-button block @click="verifyStudent">
                <SafetyCertificateOutlined /> 学生身份验证
              </a-button>
              <a-button block @click="viewCourses">
                <ReadOutlined /> 查看合作课程
              </a-button>
            </a-space>
          </a-card>
        </a-col>
      </a-row>

      <!-- API调用统计 -->
      <a-card title="📊 API调用统计" size="small" style="margin-top: 16px">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-statistic title="今日调用" :value="apiStats.today" suffix="次">
              <template #prefix>📈</template>
            </a-statistic>
          </a-col>
          <a-col :span="6">
            <a-statistic title="本月调用" :value="apiStats.month" suffix="次">
              <template #prefix>📊</template>
            </a-statistic>
          </a-col>
          <a-col :span="6">
            <a-statistic title="总调用" :value="apiStats.total" suffix="次">
              <template #prefix>🔢</template>
            </a-statistic>
          </a-col>
          <a-col :span="6">
            <a-statistic
              title="本月费用"
              :value="apiStats.cost"
              prefix="¥"
              suffix="元"
            >
              <template #prefix>💰</template>
            </a-statistic>
          </a-col>
        </a-row>

        <a-card title="调用详情" size="small" style="margin-top: 16px">
          <a-table
            :data-source="apiCallLogs"
            :columns="apiColumns"
            size="small"
            :pagination="{ pageSize: 5 }"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'status'">
                <a-tag :color="record.status === 'success' ? 'green' : 'red'">
                  {{ record.status === 'success' ? '成功' : '失败' }}
                </a-tag>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-card>

      <!-- 费用明细 -->
      <a-card title="💵 服务费用明细" style="margin-top: 16px">
        <a-table :data-source="feeRecords" :columns="feeColumns" size="small">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag
                :color="
                  record.status === 'paid'
                    ? 'green'
                    : record.status === 'pending'
                      ? 'orange'
                      : 'blue'
                "
              >
                {{
                  record.status === 'paid'
                    ? '已支付'
                    : record.status === 'pending'
                      ? '待支付'
                      : '审核中'
                }}
              </a-tag>
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a @click="viewFeeDetail(record)">详情</a>
                <a v-if="record.status === 'pending'" @click="payFee(record)">支付</a>
              </a-space>
            </template>
          </template>
        </a-table>

        <a-row :gutter="16" style="margin-top: 16px">
          <a-col :span="8">
            <a-statistic
              title="年度总支出"
              :value="856.5"
              suffix="万"
              :precision="2"
            >
              <template #prefix>💳</template>
            </a-statistic>
          </a-col>
          <a-col :span="8">
            <a-statistic
              title="待支付"
              :value="28.5"
              suffix="万"
              :precision="2"
              :value-style="{ color: '#faad14' }"
            >
              <template #prefix>⏳</template>
            </a-statistic>
          </a-col>
          <a-col :span="8">
            <a-statistic
              title="本月支出"
              :value="65.8"
              suffix="万"
              :precision="2"
            >
              <template #prefix>📅</template>
            </a-statistic>
          </a-col>
        </a-row>
      </a-card>

      <!-- 数据看板 -->
      <a-card title="📈 协作数据看板" style="margin-top: 16px">
        <a-row :gutter="16">
          <a-col :span="12">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                height: 300px;
                background: #f5f5f5;
                border-radius: 4px;
              "
            >
              <div style="text-align: center">
                <PieChartOutlined style="font-size: 48px; color: #1890ff" />
                <p style="margin-top: 12px">服务费用分布</p>
                <p style="font-size: 12px; color: #666">
                  （私人银行45%、保险25%、医疗18%、教育12%）
                </p>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                height: 300px;
                background: #f5f5f5;
                border-radius: 4px;
              "
            >
              <div style="text-align: center">
                <BarChartOutlined style="font-size: 48px; color: #52c41a" />
                <p style="margin-top: 12px">月度服务趋势</p>
                <p style="font-size: 12px; color: #666">
                  （近6个月服务量稳步增长）
                </p>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </a-card>
  </div>
</template>

<style scoped lang="scss">
.business-collaboration {
  // 样式
}
</style>
